<template>
    <div class="layout" :style="layoutStyle">
        <template v-for="(item, i) in layout">
            <GridViewItem :property="item" :direction="direction" :node-key="nodeKey" :col="col" :key="i">
                <template #default="{ grid }">
                    <slot :grid="grid"></slot>
                </template>
            </GridViewItem>
        </template>
    </div>
</template>

<script>
import { DirectionEnum, WrapEnum } from './util/emnu'
export default {
    name: 'GridView',
    props: {
        // 数据
        layout: {
            type: Array,
            default: () => []
        },
        // 唯一标识
        nodeKey: String,
        // flex方向
        direction: {
            type: String,
            default: 'row',
            validator: (value) => DirectionEnum.indexOf(value) !== -1,
        },
        // flex换行
        wrap: {
            type: String,
            default: 'nowrap',
            validator: (value) => WrapEnum.indexOf(value) !== -1,
        },
        // 换行时每行个数
        col: Number
    },
    computed: {
        // 样式
        layoutStyle() {
            const { direction, wrap } = this
            return {
                'flex-direction': direction,
                'flex-wrap': wrap
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.layout{
    width: 100%;
    height: 100%;
    display: flex;
    padding: 5px;
    box-sizing: border-box;
    transition: all 0.2s;
}
</style>
